<template>
	<div class="tpl-content-wrapper">
		<ol class="am-breadcrumb">
			<li>
				<a href="#" class="am-icon-home">首页</a>
			</li>
			<li>
				<a href="#">车位系统</a>
			</li>
			<li class="am-active">停车记录</li>
		</ol>
		<div class="tpl-portlet-components">
			<div class="tpl-block">
				<div class="am-g">
					<div class="am-u-sm-12 am-u-md-6">
						<div class="am-btn-toolbar">
							<div class="am-btn-group">
							</div>
						</div>
					</div>
				</div>
				<div class="am-g">
					<div class="am-u-sm-12 am-u-md-6">
						<div class="am-btn-toolbar">
							<div class="am-btn-group">
							</div>
						</div>
					</div>
	
					<div class="am-u-sm-12 am-u-md-4">
						<div class="am-input-group am-input-group-sm">
							<input v-model="fuzzy" @keyup.enter="onSearch" type="text" class="am-form-field" placeholder='请输入“关键词”查看信息'>
							<span class="am-input-group-btn">
								<button @click="onSearch" class="am-btn  am-btn-default am-btn-secondary tpl-am-btn-success am-icon-search" type="button"></button>
								<button class="am-btn am-btn-secondary" data-am-collapse="{target: '#collapse-nav-comment'}">更多条件
									<i class="am-icon-chevron-down"></i>
								</button>
							</span>
						</div>
					</div>
				</div>
	
				<nav>
					<div id="collapse-nav-comment" class="tpl-content-wrapper am-collapse am-animation-fade" style="padding-left:0;">
						<div class="tpl-portlet-components">
							<div class="tpl-block ">
								<div class="am-g tpl-amazeui-form">
									<form class="am-form">
										<time-search @setEctime="setEctime" @setSctime="setSctime"></time-search>
									</form>
								</div>
							</div>
						</div>
					</div>
				</nav>
			</div>
			<div class="am-g">
				<div class="am-u-sm-12">
					<form class="am-form">
						<table class="am-table am-table-striped am-table-hover table-main">
							<thead>
								<tr>
									<th class="table-id">序号</th>
									<th>用户手机号</th>
									<th>车位</th>
									<th>花费（单位：元）</th>
									<th class="am-hide-sm-only">开始时间</th>
									<th class="am-hide-sm-only">结束时间</th>
									<th class="am-hide-sm-only">车位编号</th>
								</tr>
							</thead>
							<tbody>
								<tr v-for="(list, index) in lists">
									<td>{{index + 1}}</td>
									<td>{{list.userPhone}}</td>
									<td>{{list.name}}</td>
									<td>{{list.cost}}</td>
									<td class="am-hide-sm-only">{{list.ctime | date}}</td>
									<td class="am-hide-sm-only">{{list.etime | date}}</td>
									<td class="am-hide-sm-only">{{list.srcMac}}</td>
								</tr>
							</tbody>
						</table>
						<pager :allCount="allCount" :count="count" :page="page" @changePage="changePage" @renovate="renovate"></pager>
						<hr>
					</form>
				</div>
			</div>
		</div>
	</div>
	</div>
</template>

<script>
import * as apis from '../../../apis'
export default {
	data() {
		return {
			lists: [],
			state: '', fuzzy: '', sctime: '', ectime: '',
			count: 0, allCount: 0,
			page: 1,
			pageSize: 20
		}
	},
	created() {
		this.getCount()
	},
	mounted() {
	},
	computed: {
	},
	methods: {
		getCount() {
			apis.RecordCount(this.fuzzy, this.sctime, this.ectime).then(({ data: data }) => {
				if (data && data.errcode === 0) {
					this.allCount = data.data.count
					this.count = Math.ceil(data.data.count / this.pageSize)
					this.getLists()
				} else {
					this.lists = []
				}
			})
		},
		getLists() {
			apis.RecordList(this.page, this.pageSize, this.fuzzy, this.sctime, this.ectime).then(({ data: data }) => {
				if (data && data.errcode === 0) {
					this.lists = data.data.list
					console.log(this.lists)
				}
			})
		},
		changePage(page) {
			this.page = page
			this.getLists()
		},
		goTo(id) {
			this.$router.push({ name: 'BannerForm', params: { id: id } })
		},
		onSearch() {
			this.page = 1
			this.getCount()
		},
		setSctime(val) {
			this.sctime = val
		},
		setEctime(val) {
			this.ectime = val
		},
		renovate(page) {
			this.getCount()
		}
	}
}

</script>